<template>
  <div>
    <p>从仓库中的counter模块中去取值</p>
    <p>state：{{ $store.state.counter.count }}</p>
    <p>getters: {{ $store.getters['counter/getCountSquare'] }}</p>
    <hr />
    <p>以下是经过映射的</p>
    <!-- <p>{{ count }}</p> -->
    <p>computed {{ num }}</p>
    <p>computed {{ square }}</p>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  computed: {
    /**
     * 参数1：模块名
     * 参数2：数组，映射state的哪个便利
     */
    // ...mapState('counter', ['count'])
    ...mapState('counter', { num: 'count' }),
    /**
     * 参数1：模块名
     * 参数2：对象，它里面相当于在改名字
     */
    ...mapGetters('counter', { square: 'getCountSquare' })
  },
  updated () {
    // console.log(this.$store)
    console.log('---state---', this.$store.state.counter.count)
    console.log('---getters---', this.$store.getters['counter/getCountSquare'])
  }
}
</script>
